<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>新媒体数据</title>
		<style type="text/css">
			body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,th,td{margin:0;padding:0;border: 0;box-sizing: border-box;}
			body{font-family: "Microsoft YaHei";color:#98a8c2;overflow: hidden;}
			.fl{float: left;}
			.section_name{color: #fff;}
			.b-title img{width: .29rem;height: .33rem;margin-right: .1rem;}
			.b-title{height: .33rem;line-height: .33rem;font-size: .3rem;font-weight: bold;margin-bottom: .25rem;width: 100%;}
			.b-content{width: 7.62rem;height: 3.86rem;background-color: rgba(34,82,158,.1)}
			.b-content>div{width: 50%;height: 100%;padding-top: .33rem;}
			.title{font-size: .26rem;color: #eee;text-align: center;height: .27rem;line-height: .27rem;}
			#circles-1 .circles-text{font-size: .24rem !important;/*line-height: 1 !important;*/}
			#circles-2 .circles-text{font-size: .24rem !important;line-height: 1 !important;padding: 30% 10%;}
			.circleWrap{height: 1.17rem;margin-top: .23rem;padding-left: .39rem;}
            .circle{width: 1.17rem;height: 1.17rem;}
            .circle .circles-wrp{width:100%;height: 100%;}
			.circleNum{font-size: .2rem;border-bottom: 1px solid #fff;margin-left: .18rem;padding:0 .15rem .08rem;margin-top: .34rem;line-height: 1;width: 1.5rem;}
			.web .title{padding-left: .2rem;text-align: left;}
			.webNum{color: #87cdfb;font-size: .4rem;text-align: center;height: .94rem;line-height: .7;padding-top: .24rem;width: 2.05rem;font-weight: bold;}
			.QR-code{height: 1.55rem;padding: .2rem .47rem;}
			.QR-code-wrap{width: 1.19rem;height: 1.19rem;background: rgba(255,255,255,.1);border-radius: 50%;}
			.QR-code-wrap img{width: .91rem;height: .91rem;display: block;margin: .14rem auto;}
			.articleNum{font-size: .22rem;color: #b4dffb;margin-left: .32rem;margin-top: .24rem;text-align: center;}
			.article-number{font-size: .4rem;font-weight: bold;}
			.logoText{font-size: .26rem;color: #f5fe00;line-height: 1;font-style: italic;}
			.rumNum{font-size: .4rem;}

            /*1366下面*/
            @media screen and (max-width: 330px) {
                .rumNum{font-size: .38rem;}
                .articleNum{
                    margin-left: .22rem;
                }
            }
            .block{z-index:999999;display:none;cursor:se-resize;width: 0.15rem;height: 0.15rem;background-color: red;position: absolute;right:0rem;bottom:0rem;}

		</style>
		<script src="dragStatic/js/jquery-3.2.1.min.js"></script>
        <script src="dragStatic/js/common.js"></script>
		<script src="preview/js/circles.js"></script>
		<script src="preview/js/jquery.waypoints.min.js"></script>
		<script src="preview/js/jquery.countup.min.js"></script>
	</head>
	<body>
        <div class="media">
            <div class="b-title"><img src="preview/img/listimg.png"  class="fl"/><span class="section_name fl" data-key="resource_str">新媒体数据</span></div>
            <div class="b-content">
                <div class="fl weiXin">
                    <div class="title">微信公众号</div>
                    <div class="circleWrap">
                        <div class="circle fl" id="circles-1"></div>
                        <div class="circleNum fl">
                            <span class="rumNum" id="wx_fensi">0</span>人
                        </div>
                    </div>
                    <div class="circleWrap">
                        <div class="circle fl" id="circles-2"></div>
                        <div class="circleNum fl">
                            <span class="rumNum" id="wx_fwl">0</span>人
                        </div>
                    </div>
                </div>
                <div class="fl web">
                    <div class="title">官方网站访问量</div>
                    <div class="webNum">56238</div>
                    <div class="title">扫描关注公众号</div>
                    <div class="QR-code">
                        <div class="QR-code-wrap fl"><img src="preview/img/QR-code.png"/></div>
                        <div class="articleNum fl">
                            <p>累计发文量</p>
                            <p><span class="article-number" id="wx_sucai"></span>篇</p>
                        </div>
                    </div>
                    <div class="logoText">"超星数字图书馆"</div>
                </div>
            </div>
            <div class="block"></div>
        </div>
	</body>
</html>

<script type="text/javascript">
    window.onload = function(){
        //全局基础路径
//    var basePath = "//" + document.domain+':'+location.port;
        var basePath = "whfw.superlib.com:9025";
        var baseAddress="whfw.superlib.com:9025";
        var numTimer1=null,//数字滚动定时器,
                myCircle1,//第一个圆环
                myCircle2,//第二个圆环
               currentFontSize,
                p_init_flag = 0;
        getRem(762,100);
        //初始化访问量
        init_wx_fwl();
        //初始化粉丝量
        fnt_excute_task(4, 0, 0, init_wx_fensi);
        //初始化素材数
        init_wx_sucai();
        //定时执行某方法的函数
        function fnt_excute_task(h, m, s, task){
            if (p_init_flag == 0) {//初始化或页面刷新先执行一次
                task();
                p_init_flag = 1;
                console.log("-------- "+ task.name +"初始化执行了......");
            }
            var timeId = setInterval(function(){
                var date = new Date();
                if (date.getHours() == h && date.getMinutes() == m && date.getSeconds() == s){
                    clearInterval(timeId);
                    task();
                    setInterval(task, 24*60*60*1000);
                }
            }, 1000);
        }
        function numRun(){
            $(".webNum").countUp({
                delay: 10,
                time: 2000
            });
            $(".rumNum").countUp({
                delay: 5,
                time: 1200
            });
            $(".article-number").countUp({
                delay: 5,
                time: 800
            });
        }
        function createCircle(){
            $(".circle").empty();
            myCircle1 = Circles.create({
                id:'circles-1',
                radius:58.5*currentFontSize/100,
                value: 80, //当前值
                maxValue:100, //最大值
                width: 6*currentFontSize/100,
                text: function(value){return '粉丝量';},
                colors: ['rgba(58,96,207,1)', 'rgba(255,255,255,.5)'],
                duration:  1200,
                wrpClass:'circles-wrp',
                textClass: 'circles-text',
                valueStrokeClass: 'circles-valueStroke',
                maxValueStrokeClass: 'circles-maxValueStroke',
                styleWrapper: true,
                styleText: true
            });
            myCircle2 = Circles.create({
                id:'circles-2',
                radius:58.5*currentFontSize/100,
                value: 80,
                maxValue:100,
                width: 6*currentFontSize/100,
                text: function(value){return '近30天<br/>访问量';},
                colors: ['rgba(58,96,207,1)', 'rgba(255,255,255,.6)'],
                duration:  1200,
                wrpClass:'circles-wrp',
                textClass: 'circles-text',
                valueStrokeClass: 'circles-valueStroke',
                maxValueStrokeClass: 'circles-maxValueStroke',
                styleWrapper: true,
                styleText: true
            });
        }
        //************微信公众号接口数据对接***************//
        //微信公众号粉丝量
        function init_wx_fensi(){
            $.ajax({
                type : "GET",
                url: "https://"+baseAddress+"/cxts/wxDataCube/getuserlist",
                data : {},
                dataType : "JSON",
                success : function(rec){
                    if (rec){
                        $('#wx_fensi').html(rec.total);
                    }
                    createCircle();
                    numRun();
                    divFlex("media");////调用缩放功能
                    numTimer1 = setInterval(function(){
                        numRun();
                        createCircle();
                    },10000);
                    console.log("info ---->> 微信公众号粉丝量数据初始化了...");
                },
                error : function(){
                    console.log("请求异常，请稍后再试...");
                }
            });
        }
        //微信公众号访问量
        function init_wx_fwl(){
            $.ajax({
                type : "GET",
                url: "https://"+baseAddress+"/cxts/wxDataCube/getuserread",
                data : {},
                dataType : "JSON",
                success : function(rec){
                    if (rec){
                        var fwl_num = rec.int_page_read_user;
                        $('#wx_fwl').html(fwl_num);
                    }
                    console.log("info ---->> 微信公众号访问量数据初始化了...");
                },
                error : function(){
                    console.log("请求异常，请稍后再试...");
                }
            });
        }
        //微信公众号素材总数
        function init_wx_sucai(){
            $.ajax({
                type : "GET",
                url: "https://"+baseAddress+"/cxts/wxDataCube/get_materialcount",
                data : {},
                dataType : "JSON",
                success : function(rec){
                    if (rec){
                        var sucai_num = 0;
                        sucai_num += rec.news_count;//图文总数
                        sucai_num += rec.image_count;//图片总数
                        sucai_num += rec.video_count;//视频总数
                        sucai_num += rec.voice_count;//语音总数
                        $('#wx_sucai').html(sucai_num);
                    }
                    console.log("info ---->> 微信公众号素材总数数据初始化了...");
                },
                error : function(){
                    console.log("请求异常，请稍后再试...");
                }
            });
        }

        window.onresize = function(){
            currentFontSize= getRem(762,100);
//                    $('.circle .circles-wrp svg').css({width:"100%",height:"100%"});
            $(".circle").empty();
            myCircle1 = Circles.create({
                id:'circles-1',
                radius:58.5*currentFontSize/100,
                value: 80, //当前值
                maxValue:100, //最大值
                width: 6*currentFontSize/100,
                text: function(value){return '粉丝量';},
                colors: ['rgba(58,96,207,1)', 'rgba(255,255,255,.5)'],
                duration:  1200,
                wrpClass:'circles-wrp',
                textClass: 'circles-text',
                valueStrokeClass: 'circles-valueStroke',
                maxValueStrokeClass: 'circles-maxValueStroke',
                styleWrapper: true,
                styleText: true
            });
            myCircle2 = Circles.create({
                id:'circles-2',
                radius:58.5*currentFontSize/100,
                value: 80,
                maxValue:100,
                width: 6*currentFontSize/100,
                text: function(value){return '近30天<br/>访问量';},
                colors: ['rgba(58,96,207,1)', 'rgba(255,255,255,.6)'],
                duration:  1200,
                wrpClass:'circles-wrp',
                textClass: 'circles-text',
                valueStrokeClass: 'circles-valueStroke',
                maxValueStrokeClass: 'circles-maxValueStroke',
                styleWrapper: true,
                styleText: true
            });
        };

    };
    function getRem(pwidth,prem){
        var html = document.getElementsByTagName("html")[0];
        var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
        html.style.fontSize = oWidth/pwidth*prem + "px";
        return oWidth/pwidth*prem;
    }

</script>

